import { observer } from "mobx-react";
import todoListStore from "../../store/todoListStore";

function Main() {
  const { todoList } = todoListStore;

  // 如果要给事件回调传递额外的参数，就需要高阶函数
  const handleChange = (id: number) => {
    return () => {
      todoListStore.updateTodo(id);
    };
  };

  const handleDel = (id: number) => {
    return () => {
      todoListStore.delTodo(id);
    };
  };

  return (
    <ul className="todo-main">
      {todoList.map((todo) => {
        return (
          <li key={todo.id}>
            <label>
              <input type="checkbox" checked={todo.isDone} onChange={handleChange(todo.id)} />
              <span>{todo.todoName}</span>
            </label>
            <button className="btn btn-danger" onClick={handleDel(todo.id)}>
              删除
            </button>
          </li>
        );
      })}
    </ul>
  );
}

// 使用observer，将来响应式数据发送变化，才会重新渲染组件
export default observer(Main);
